﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-sm-12">
            <p>
               Modern Tiles is a template for applying fancy image hovers that can be tweaked via the template settings to apply your favorite hover effect.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Featured screenshots</h3>
        </div>
        <div class="col-sm-8">
            <img src="../lists/Templates/beta/moderntiles/content/imgs/featured.png" class="img-thumbnail" alt="featured screenshot" title="featured screenshot" />
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Supported browsers</h3>
        </div>
        <div class="col-sm-10">
            <ul class="list-group">
                <li class="list-group-item">
                    <span class="badge">v10+</span>
                    Internet Explorer
                </li>
                <li class="list-group-item">
                    <span class="badge">Partialy</span>
                    Firefox
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Google Chrome
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported (on Mac OS X)</span>
                    Safari
                </li>
                <li class="list-group-item">
                    <span class="badge">Supported</span>
                    Opera
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Required List columns</h3>
            <p>This template can be applied on list views that have the following columns:</p>
        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-2'>Template Field</th>
                        <th class='col-sm-5'>Type</th>
                        <th class='col-sm-5'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>fldTitle</td>
                        <td>Single line of text</td>
                        <td>Tile title & Image tooltip (alt)</td>
                    </tr>
                    <tr>
                        <td>fldImage</td>
                        <td>Hyperlink or Picture (Picture)</td>
                        <td>Tile Image</td>
                    </tr>
                    <tr>
                        <td>fldLink</td>
                        <td>Hyperlink or Picture (Hyperlink)</td>
                        <td>Tile on click link</td>
                    </tr>
                    <tr>
                        <td>fldDescription</td>
                        <td>Multiple lines (Enhanced rich text)</td>
                        <td>Tile description area</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-12">
            <blockquote class="border-info">
                <p class="text-info">Info</p>
                <p><h5>If you have different column names you can change them from the <b>Apply</b> tab and change field mappings from the <b>Fields Mapping section</b>.</h5></p>
            </blockquote>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Settings</h3>
            <p>This template has the following settings to play with. Below are the available settings with all options and their default values:</p>
        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <thead>
                    <tr>
                        <th class='col-sm-3'>Setting</th>
                        <th class='col-sm-3'>Default</th>
                        <th class='col-sm-6'>Usage</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>fullWidth</td>
                        <td>100%</td>
                        <td>Tiles area width size</td>
                    </tr>
                    <tr>
                        <td>effect</td>
                        <td>oscar</td>
                        <td>This template support 24 different styles and effects, read below note to figure out what is fit for your site</td>
                    </tr>
                    <tr>
                        <td>renditionID</td>
                        <td>0</td>
                        <td>SP rendition ID of tile image (0 normal image dimensions). <b>Make sure to use a rendition that fits with the tile 'tileWidth' and 'tileHeight'</b></td>
                    </tr>
                    <tr>
                        <td>tileWidth</td>
                        <td>300px</td>
                        <td>Tiles width</td>
                    </tr>
                    <tr>
                        <td>tileHeight</td>
                        <td>300px</td>
                        <td>Tiles height</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col-sm-12">
            <blockquote class="border-info">
                <p class="text-info">Info</p>
                <p>
                    <h5>
                        This template support <b>24</b> different styles and effects: lily, sadie, layla, zoe, oscar, marley, ruby, roxy, bubba, romeo, dexter, sarah, chico, milo, julia, goliath, selena, apollo, steve, moses, jazz, ming, lexi, duke <br />
                        <br />
                        visit this <b><a href="http://tympanus.net/Development/HoverEffectIdeas/index.html">link</a></b> to see what is fit with your site and change the <b>"effect" setting</b> befor apply it.
                    </h5>
                </p>
            </blockquote>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <h3 class="page-header">Credit</h3>
            <p>The following libraries were used to help creating this template:</p>
        </div>
        <div class="col-sm-10">
            <table class="table table-striped table-hover ">
                <tbody>
                    <tr>
                        <td><a href="http://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/" target="_blank">Ideas for Subtle Hover Effects</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>